<template>
    <div class="user-management-form">
        <el-dialog v-model="dialogVisible" @close="onCloseDialog">
            <template #header>
                <span>{{ component.formStatus }}文件</span>
            </template>
            <el-form ref="formRef" :model="form" class="demo-ruleForm" :rules="formRules">
                <template v-for="(item, index) in fileFolder" :key="index">
                    <el-form-item :label="item.label" :prop="item.prop" :label-width="item.width"
                        v-if="item.prop !== '_id'">
                        <el-date-picker v-model="form[item.prop]" type="datetime"
                            :placeholder="component.formPlaceholder[item.prop]"
                            v-if="['updatedAt', 'createdAt'].includes(item.prop)" />

                        <el-cascader v-else-if="item.prop === 'path'" v-model="form[item.prop]" clearable
                            :props="{ checkStrictly: true }" :options="fileFromOpts['path']" @change="onCascaderChange"
                            :placeholder="component.formPlaceholder[item.prop]" />

                        <el-select v-else-if="item.prop === 'type'" v-model="form[item.prop]" disabled
                            :placeholder="component.formPlaceholder[item.prop]">
                            <el-option v-for="t in fileFromOpts[item.prop]" :key="t.value" :label="t.label" :value="t.value"
                                :disabled="t.disabled" />
                        </el-select>

                        <el-input v-model="form[item.prop]" :placeholder="component.formPlaceholder[item.prop]"
                            v-else></el-input>

                    </el-form-item>
                </template>
                <!-- <el-form-item>
                    <HUpload></HUpload>
                </el-form-item> -->
                <!-- <el-form-item>
                        <el-button :type="component.formControl.submit.type" @click="submitForm(formRef)">{{
                            component.formControl.submit.value }}</el-button>
                        <el-button :type="component.formControl.reset.type" @click="resetForm(formRef)">{{
                            component.formControl.reset.value }}</el-button>
                        <el-button type="primary" @click="addUser">添加用户</el-button>
                    </el-form-item> -->
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCloseDialog('关闭')">关闭</el-button>
                    <el-button type="primary" @click="onCloseDialog('确认')">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { FormInstance } from "element-plus/es/components/form"
import { computed, ref, watch } from "vue"
import { useStore } from "vuex"
import { IFileManagementState } from "@/store/models/Admin/FileManagement/types"
import { IUserManagementState } from "@/store/models/Admin/UserManagement/types"
import HUpload from "@/components/ElementPlusWrapper/upload/HUpload.vue"
import { getFileTree } from "@/apis/web/File"

const store = useStore()

const addUser = () => {
    const user = {
        username: 'test' + Math.random(),
        password: 'test',
        email: '1231@qq.com',
        camera: ["644beccaf628f8e53b8c7719", "644bf06b6507d430db0d950e"],
        role: "user",
        createdAt: "2021-08-10T08:00:00.000Z",
        updatedAt: "2021-08-10T08:00:00.000Z"
    }
    store.commit('admin/userManagement/_addUser', user)
}
const formRef = ref<FormInstance>()

const dialogVisible = computed(() => store.state.admin.fileManagement.dialogVisible)
const files = computed(() => store.state.admin.fileManagement.files)
const component = computed(() => store.state.admin.fileManagement.fileFormComponent as IFileManagementState['fileFormComponent']);
const form = computed(() => store.state.admin.fileManagement.fileForm);
const formRules = computed(() => store.state.admin.fileManagement.fileFormRules);
const fileFolder = computed(() => store.state.admin.fileManagement.fileFolder);
const fileFromOpts = computed(() => store.state.admin.fileManagement.fileFromOpts);

const submitForm = (formEl: FormInstance | undefined) => store.dispatch("admin/fileManagement/submitForm")
const resetForm = (formEl: FormInstance | undefined) => formEl && formEl.resetFields();
const onCloseDialog = (payload) => {
    if (payload === '确认') {
        submitForm(formRef.value)
    }
    store.commit('admin/fileManagement/_setState', { path: 'dialogVisible', value: false })
}
const onCascaderChange = (val) => {
    // form.value.path = val.join('/')

}
</script>
